<template>
  <div class="bg-c-fff mb70 container min-height">
    <h2 class="box-title rel"><a href="#/index/user-manage">权限管理-角色管理</a> > 新增用户</h2>
    <form @submit.prevent="onSubmitClick">
      <ul>
        <li>
          <span>用户名：</span>
          <input type="text" class="input-css input-w1" v-model="account">
        </li>
        <li>
          <span>所属角色：</span>
          <select v-model="roleName">
            <option value="">请选择角色</option>
            <option v-for="item in roleList" :value="item.id">{{item.roleName}}</option>
          </select>
        </li>
        <li>
          <span>手机号码：</span>
          <input type="text" class="input-css input-w1" v-model="phone">
          <p>保存成功后，可支持用户名或手机号码登录管理后台</p>
        </li>
        <li v-show="this.$route.query.type === 'newUser'">
          <span>密码：</span>
          <input type="text" class="input-css input-w1" v-model="password">
          <p>6-20位英文字母、数字或字符组合，且不能与用户名相同</p>
        </li>
        <li>
          <span>员工姓名：</span>
          <input type="text" class="input-css input-w1" v-model="userName">
        </li>
        <li>
          <span>备注：</span>
          <textarea class="vt" v-model="remarks"></textarea>
        </li>
        <li>
          <span></span>
          <button type="submit" class="blue-button xl-btn-css">保存</button>
          <button type="button" class="blue-button xl-btn-css">取消</button>
        </li>
      </ul>
    </form>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      account: '',
      roleList: [],
      roleName: '',
      phone: '',
      password: '',
      userName: '',
      remarks: ''
    }
  },
  mounted() {
    this.$http.get('/sys/role/list', {
      params: {
        rows: 9899
      }
    }).then((data) => {
      if (data.data.httpCode === 200) {
        this.roleList = data.data.rows
        this.getUserInfo()
        console.log(data.data.rows)
      } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    getUserInfo() {
      if (this.$route.query.type === 'editUser') {
        this.$http.get('/sys/user/detail/' + this.$route.query.id).then((data) => {
          if (data.data.httpCode === 200) {
            let r = data.data.data
            console.log(r)
            this.account = r.account
            this.roleName = r.userRole
            this.phone = r.phone
            this.password = r.password
            this.userName = r.userName
            this.remarks = r.remark || ''
          } else {
            this.$toasted.show(data.data.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    onSubmitClick() {
      if (!this.account) {
        this.$toasted.show('请输入用户名！')
        return
      }
      if (!this.roleName) {
        this.$toasted.show('请选择角色名称！')
        return
      }
      var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1})|(16[0-9]{1}))+\d{8})$/
      if (!myreg.test(this.phone)) {
        this.$toasted.show('请输入有效地手机号码')
        return
      }
      if (this.$route.query.type === 'newUser') {
        if (!this.password) {
          this.$toasted.show('请输入密码！')
          return
        }
        if (this.password.length < 8 || this.password.length > 12) {
          this.$toasted.show('密码应为6-20位英文字母、数字或字符组合，且不能与用户名相同！')
          return
        }
      }
      if (!this.userName) {
        this.$toasted.show('请输入员工姓名！')
        return
      }
      if (this.$route.query.type === 'newUser') {
        this.$http.post('/sys/user/create', {
          account: this.account,
          userRole: this.roleName,
          phone: this.phone,
          password: this.password,
          userName: this.userName,
          remark: this.remarks
        }).then(data => {
          if (data.data.httpCode === 200) {
            this.$toasted.show('添加成功')
            this.$router.push('/index/user-manage')
          } else {
            console.log(data.data.msg)
            this.$toasted.show(data.data.msg)
          }
        }).catch(() => {
          this.$toasted.show('网络出错')
        })
      }
      if (this.$route.query.type === 'editUser') {
        this.$http.post('/sys/user/update', {
          id: this.$route.query.id,
          account: this.account,
          userRole: this.roleName,
          phone: this.phone,
          userName: this.userName,
          remark: this.remarks
        }).then(data => {
          if (data.data.httpCode === 200) {
            this.$toasted.show('修改成功')
            this.$router.push('/index/user-manage')
          } else {
            console.log(data.data.msg)
          }
        }).catch(() => {
          this.$toasted.show('网络出错')
        })
      }
    }
  }
}

</script>
<style type="text/css" scoped>
.container {
  margin-top: 20px;
}

.min-height {
  min-height: 507px;
}

.box-title a {
  color: #a5a5a5;
}

ul {
  padding: 0 0 70px 190px;
}

ul li {
  padding: 10px 0;
}

ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

ul li p {
  margin-left: 150px;
  color: #a5a5a5;
  margin-left: 220px;
}

select {
  height: 35px;
  border: 1px solid #dddddd;
  width: 150px;
}

textarea {
  width: 350px;
  height: 140px;
  padding: 10px;
}

button {
  margin-right: 45px;
}

</style>
